<template>
	<view>
		<!-- 搜索列表 -->
		<block v-for="(item, index) in dataList" :key="index">
			<!-- <tn-swipe-action v-if="canSwipe">
				<tn-swipe-action-item :options="swipeOptions" @click="handleSwipe(index)"> -->
			<next-swipe-action :btnGroup="swipeOptions" :index="index" @btnClick="handleSwipe" v-if="canSwipe">
				<view class="cl-box" @click="details(item)">
					<!-- <view > -->
					<image class="cl-img" mode="aspectFit" :src="item.coverImage"></image>
					<!-- </view> -->
					<view class="cl-info">
						<view class="cl-title">{{item.title}}</view>
						<view class="cl-author">
							<image class="author-img" :src="item.avatar"></image>
							<view class="author-info">
								<view class="author-name">{{item.authorName}}</view>
								<view class="author-hosp">{{item.orgName}}</view>
							</view>
						</view>
					</view>
				</view>
			</next-swipe-action>
			<!-- </tn-swipe-action-item>
			</tn-swipe-action> -->
			<view class="cl-box" @click="details(item)" v-else>
				<!-- <view > -->
				<image class="cl-img" mode="aspectFit"  :src="item.coverImage"></image>
				<!-- </view> -->
				<view class="cl-info">
					<view class="cl-title">{{item.title}}</view>
					<view class="cl-author">
						<image class="author-img" mode="aspectFit" :src="item.avatar"></image>
						<view class="author-info">
							<view class="author-name">{{item.authorName}}</view>
							<view class="author-hosp">{{item.orgName}}</view>
						</view>
					</view>
					<view class="cl-author">
						<view class="author-info">
							<view class="author-hosp">收藏量：{{item.collectCount}} 播放量：{{item.viewCount}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>

</template>

<script>
	import {
		batchDelete
	} from '@/util/index.js'
	export default {
		name: "content-list",
		//属性
		props: {
			dataList: {
				type: Array,
				default: []
			},
			canSwipe: {
				type: Boolean,
				default: false
			},
			// 滑动菜单
			swipeOptions: {
				type: Array,
				default: []
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				content: '',
			};
		},
		created() {},
		methods: {
			details(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			handleSwipe(e) {
				if (this.type == 'collect') {
					batchDelete({
						contentsVOList: [{
							id: this.dataList[e.index].id
						}],
						valiFlag: '0'
					}).then((res) => {
						this.$emit('refreshContent')
					})
				}
			}
		}

	}
</script>

<style lang="less">
	.cl-box {
		width: 100%;
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eeeeee;

		// align-items: center;
		.cl-img {
			width: 250rpx;
			height: 200rpx;
			display: block;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.cl-info {
			// flex: 1;
			width: 460rpx;
			padding-left: 20rpx;

			.cl-title {
				font-size: 30rpx;
				font-weight: 500;
				// text-overflow: ellipsis;
				overflow: hidden;
				// white-space: nowrap;
				width: 400rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.2;
				height: 2.4em;
				display: -webkit-box;
			}

			.cl-author {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.author-img {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					background-color: #FFFFFF;
				}

				.author-info {
					width: 300rpx;

					view {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 300rpx;
						line-height: 38rpx;
					}

					.author-hosp {
						color: #9b9b9b;
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>
